<template>
  <div class="refresh-wrapper">
    <div :class="top > 30 ? 'new-refresh' : 'refresh'"
          ref="refresh">
        <div class="refresh-content">
          <img alt="Vue logo"
              src="@/assets/logo.png">
          <p>{{ content }}</p>
          <van-loading v-show="content === '加载中...'" color="#2F3542" />
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    scrollTop: {
      type: Number,
      default: 0
    },
    refreshContent: {
      type: String,
      default: '松开刷新...'
    }
  },
  watch: {
    scrollTop: {
      handler: 'updateTop'
    },
    refreshContent: {
      handler: 'updateContent'
    }
  },
  data () {
    return {
      top: 0,
      content: '下拉刷新...'
    }
  },
  created () {
    this.top = this.scrollTop
    this.content = this.refreshContent
  },
  methods: {
    updateTop (top) {
      this.top = top
      const { content } = this
      if (top <= 10) {
        this.$refs.refresh.style.height = 0
        // this.$refs.refresh.style.transition = 'all .3s'
      } else if (content === '加载中...') {
        return false
      } else if (top > 70) {
        this.$refs.refresh.style.height = 30 + 'px'
        this.$refs.refresh.style.transition = 'all .1s'
        this.content = '松开刷新...'
      }
    },
    updateContent (content) {
      this.content = content
    }
  }
}
</script>

<style lang="stylus" scoped>
.refresh-wrapper
  width 100%
  p
    margin-right 10px
</style>
